<template>
  <div class="seckill">
    <div class="seconds-wrap">
      <p class="seconds-wrap-title">每日秒杀</p>
      <!-- 倒计时模块组件 -->
      <count-down :endHours="18"></count-down>
    </div>
    <div class="seconds-content">
      <div class="seconds-content-item" v-for="(value, index) in list" :key="index">
        <img :src="'http://127.0.0.1:8089/static' + value.goods_carousel" alt="" class="seconds-content-item-img">
        <p class="seconds-content-item-price">￥{{value.selling_price}}</p>
        <p class="seconds-content-item-old-price">￥{{value.original_price}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import CountDown from './CountDown.vue'
  export default {
    components: {
      CountDown
    },
    data() {
      return {}
    },
    computed: {
      ...mapState(['goodsInfo']),
      list() {
        const item1 = this.goodsInfo.filter(value => {
          return value.original_price !== value.selling_price
        })
        // console.log(item1)
        return item1
      }
    }
  }
</script>

<style scoped>
  .seckill {
    background-color: white;
    border-radius: 8px;
    margin: 8px;
  }

  .seckill .seconds-wrap {
    display: flex;
    padding: 8px;
  }

  .seckill .seconds-content-item {
    font-size: 16px;
    display: inline-block;
  }

  .seconds-content {
    padding: 8px 0;
    display: flex;
    overflow: hidden;
    overflow-x: scroll;
  }

  .seconds-content::-webkit-scrollbar {
    display: none
  }

  .seconds-content-item {
    padding: 0 12px;
    text-align: center;
  }

  .seconds-content-item-img {
    width: 55px;
    height: 55px;
  }

  .seconds-content-item-price {
    color: red;
    font-size: 12px;
  }

  .seconds-content-item-old-price {
    color: darkgray;
    font-size: 8px;
    margin-top: 6px;
    text-decoration: line-through;
  }
</style>
